<template>
    <div>
        <pt-table :data="data" url="systems" ref="tableRef"></pt-table>
        <pt-form type="dialog" url="systems" :rules="formData" ref="formRef"></pt-form>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'

const formRef = ref()
const tableRef = ref()

onMounted(() => {
    tableRef.value.action.setFormRef(formRef)
})

const data = {
    header: { buttons: ['add', 'del', 'refresh', 'extend'], searchExtend: false },
    column: [
        { type: 'selection' },
        { type: 'index', width: 60 },
        { prop: 'username', label: '登录账户' },
        { prop: 'nickname', label: '昵称' },
        { prop: 'avatar', label: '头像', render: 'avatar', width: 80 },
        { prop: 'mobile', label: '手机号码' },
        { prop: 'login_at', label: '登录时间' },
        { prop: 'login_ip', label: '登录IP' },
        { prop: 'status', label: '状态', width: 120, render: 'switches' },
        { label: '操作', width: 120, fixed: 'right' },
    ],
}

const formData = {
    title: '系统管理员管理',
    props: { labelPosition: 'right', labelWidth: 120 },
    rules: [
        { field: 'username', label: '登录账户', required: true },
        { field: 'nickname', label: '用户昵称', required: true },
        { field: 'password', label: '用户密码', type: 'password' },
        {
            field: 'mobile',
            label: '手机号码',
            rules: [{ pattern: /^1[3456789]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur' }],
        },
    ],
}
</script>
